<!--
 * @Author: 杨湲 yy7072@qq.com
 * @Date: 2025-09-11 16:31:19
 * @LastEditors: 杨湲 yy7072@qq.com
 * @LastEditTime: 2025-09-17 14:46:42
 * @FilePath: \大三上实训\city\src\pages\components(1)\Right2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 杨湲 yy7072@qq.com
 * @Date: 2025-09-11 16:31:19
 * @LastEditors: 杨湲 yy7072@qq.com
 * @LastEditTime: 2025-09-17 14:45:48
 * @FilePath: \大三上实训\city\src\pages\components(1)\Right2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="right2" style="height: 150px;margin-top:10px;"></div>
        
    </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { onMounted, ref } from 'vue';
export default {
    data() {
        return {
            title: '实时颗粒物',

        }
    },
    methods: {
        loadBar() {

            const data = [
                { year: '1951 年', value: 38 },
                { year: '1952 年', value: 52 },
                { year: '1956 年', value: 61 },
                { year: '1957 年', value: 145 },
                { year: '1958 年', value: 48 },
            ];

            const bar = new Bar(this.$refs.right2, {
                data,
                xField: 'value',
                yField: 'year',
                seriesField: 'year',
                legend: {
                    position: 'top-left',
                },
            });

            bar.render();


        }
       
    },
 mounted() {
        this.loadBar();
        }
};
</script>
<style lang="less" scoped></style>